import React, { useCallback } from 'react'
import { Image } from '@tarojs/components'
import DBConfig from '@CONFIG/DBConfig'
import Images from '@ASSET/Images'
import './Avatar.scss'

export default function Avatar({
  data = {}, style = {}, avatarKey = 'avatar', avatarSuffix = 'jpg',
  defaultAvatar, onClickAvatar, isTransparent
}) {
  const AvatarFileName = data[avatarKey]
  const extension = data.extension || avatarSuffix
  const onClickAvatarCallBack = useCallback(e => {
    if (isTransparent) return
    e?.stopPropagation?.();
    onClickAvatar?.();
  }, [onClickAvatar, isTransparent])

  if (!AvatarFileName) {
    return (
      <Image
        src={defaultAvatar || Images.avatar}
        style={style}
        onClick={onClickAvatarCallBack}
        className={`chat-room-avatar${isTransparent ? ' opacity-avatar' : ''}`}
      />
    )
  }

  return (
    <Image
      onClick={onClickAvatarCallBack}
      src={`${DBConfig.staticDoctorAvatarUrl}${AvatarFileName}${extension ? `.${extension}` : ''}?t=${data.AvatarVersion}`}
      className={`chat-room-avatar${isTransparent ? ' opacity-avatar' : ''}`}
      style={style}
    />
  )
}
